<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tracker</title>
  <!-- Fonts -->
  <link rel="dns-prefetch" href="//fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
  <link rel="stylesheet" href="test2.css">
  <script>
    function $(id) {
      return document.getElementById(id);
    }
  </script>
</head>

<body>
  <main class="flex-center position-ref full-height linear-vertical">
    <header style="font-size: 36px;">TRACKER</header>
    <article class="shadow">
      <!-- Codes -->
      <article class="linear-vertical" style="border-right: solid 2px whitesmoke">
        <div id="input-code" class="linear-vertical">
          <label>Code here</label>
          <textarea id="ta-code">public class Code{
    public static void main(String[] args) {
        System.out.println("Input your codes here!");
    }
}</textarea>
        </div>
        <footer class="linear-horizon">
          <button id="submit" class="fill-width">Submit</button>
          <button id="analyse" class="fill-width">Analyse</button>
        </footer>
      </article>
      <!-- Analyse -->
      <article>
        <label>Analysis</label>
      </article>
    </article>
    <footer>Tracker | Chase Alex AX AM</footer>
  </main>

  <script src="Intent.js"></script>
  <script>
    let code = $("ta-code").value;
    $("submit").addEventListener("click", () => {
      postCode("http://localhost:8080/analysis/codes", code, (responseText) => {
        alert("Submit");
        console.log(responseText);
      });
    });

    let events;
    $("analyse").addEventListener("click", () => {
      getAnalysis("http://localhost:8080/analysis/", 1, (responseText) => {
        alert("Analyse");
        events = JSON.parse(responseText);
        for (let event of events) {
          console.log(event.type);
        }
      });
    })
  </script>
</body>

</html>